<template>
  <el-space>
    <el-icon @click="changeFullScreen">
      <FullScreen />
    </el-icon>
  </el-space>
  <div class="box">
    <gantt :tasks="ganttTasks" :columns="ganttColumns" :fullScreen="fullScreen" style="height: calc(100vh - 120px);"></gantt>
  </div>
</template>


<script setup lang="ts">
import { ref, reactive } from 'vue'
import Gantt from './gantt.vue'

const ganttTasks = reactive({
  data: [
    // { id: 1, text: 'Task #1', start_date: '2023-07-27', end_date: '2023-07-30', duration: 3, progress: 0.6, type:"project" },
    // { id: 1, text: 'Task #1', start_date: '2023-07-27', end_date: '2023-07-30', duration: 3, progress: 0, },
    // { id: 2, text: 'Task #2', start_date: '2023-07-23', end_date: '2023-07-26', duration: 3, progress: 0 },
    // { id: 3, text: 'Task #3', start_date: '2023-07-23', end_date: '2023-07-26', duration: 3, progress: 0, type: 'milestone', open: true }
    {
      id: 1, text: "Project #2", start_date: "2023-07-27", duration: 10,
      progress: 0.4, open: true, diyName: '哈哈哈', type: 'project'
    },
    {
      id: 2, text: "Task #1", start_date: "2023-07-28", duration: 1,
      progress: 0.6, parent: 1
    },
    {
      id: 3, text: "Task #2", start_date: "2023-07-30", duration: 1,
      progress: 0.6, parent: 1
    },
    {
      id: 9, text: "Task #6", start_date: "2023-08-01", duration: 4,
      progress: 0.6, parent: 1
    },
    {
      id: 10, text: "Task #7", start_date: "2023-08-01", duration: 4,
      progress: 0.6, parent: 0
    }
  ],
  links: [
    { id: 1, source: 1, target: 2, type: 1 },
    { id: 2, source: 2, target: 3, type: 0 },
    { id: 3, source: 2, target: 9, type: 0 },
  ]
})
let colContent = function (task: any) {
  return ('<div id="my-click" name="buttons">编辑</div>')
}

const ganttColumns = ref([
  { align: 'center', name: 'text', label: '任务名称', width: "*", min_width: 120, resize: true, tree: true },
  { align: 'center', name: 'start_date', label: '开始时间', hide: false, min_width: 120, resize: true },
  { align: 'center', name: 'duration', label: '持续时间', width: 120 },
  { align: 'center', name: 'xxxxxx', label: 'xxxxxx', width: 120 },
  { align: 'center', name: 'yyyyyyyyy', label: 'yyyyyyyyy', width: 120 },
  {
    name: "buttons",
    label: "操作",
    width: 75,
    template: colContent
  }
])

const fullScreen = ref(false)
const changeFullScreen = () => {
  fullScreen.value = !fullScreen.value
}

</script>


<style lang="scss" scoped></style>